
// 声明一个空数组
	var data1 = [];
	$.ajax({
		url: "http://211.68.191.30:8090/coldchain/get/gongsi",
		type: "post",
		success: function(datas) {
			console.log(datas);
			// 清空数组
			data1 = [];
			// 遍历返回结构
			for (var i = 0; i < datas.length; i++) {
				// 声明一个空json对象
				var json = {};
				// 设置json的name属性
				json.name = datas[i].mingcheng;
				// 转换坐标字符串为数组
				var weizhi = [];
				weizhi.push(parseFloat(datas[i].weizhi.split(",")[0]));
				weizhi.push(parseFloat(datas[i].weizhi.split(",")[1]));
				// 设置json的value属性
				json.value = weizhi;
				// 添加json对象到标记数组里
				data1.push(json);
				//基于准备好的 dom,初始化echarts实例
				var myChart = echarts.extendsMap('main', {
					bgColor: 'rgba(0,0,0,0)',
					mapName: '河北',
					goDown: true,
					callback: function(name, option, instance) {},
					data: data1
				});
			}
			console.log(data1);
		},
		error: function(e) {
			console.log(e.statusText);
		}
	});


	echarts.extendsMap = function(id, opt) {

		// 实例
		var chart = this.init(document.getElementById(id));
		//GeoJSON是一种对各种地理数据结构进行编码的格式
		var curGeoJson = {};
		var cityMap = {
			"保定市": "baoding",
			"沧州市": "cangzhou",
			"承德市": "chengde",
			"邯郸市": "handan",
			"衡水市": "hengshui",
			"廊坊市": "langfang",
			"秦皇岛市": "qinhuangdao",
			"石家庄市": "shijiazhuang",
			"唐山市": "tangshan",
			"邢台市": "xingtai",
			"张家口市": "zhangjiakou"
		};
		// 地图地理坐标
		var geoCoordMap = {
			'保定': [115.494810169, 38.886564548],
			'沧州': [116.863806476, 38.2976153503],
			'承德': [117.933822456, 40.9925210525],
			'邯郸': [114.482693932, 36.6093079285],
			'衡水': [115.686228653, 37.7469290459],
			'廊坊': [116.703602223, 39.5186106251],
			'秦皇岛': [119.604367616, 39.9454615659],
			'石家庄': [114.522081844, 38.0489583146],
			'唐山': [118.183450598, 39.6505309225],
			'邢台': [114.520486813, 37.0695311969],
			'张家口': [114.89378153, 40.8111884911]
		};
		//颜色标准
		var levelColorMap = {
			'1': 'rgba(241, 109, 115, .8)',
			'2': 'rgba(255, 235, 59, .7)',
			'3': 'rgba(147, 235, 248, 1)'
		};
		//预设置 opt 配置项
		var defaultOpt = {
			mapName: 'china', // 地图展示
			goDown: false, // 是否下钻
			bgColor: '#404a59', // 画布背景色
			activeArea: [], // 区域高亮,同echarts配置项
			data: [],
			// 下钻回调(点击的地图名、实例对象option、实例对象)
			callback: function(name, option, instance) {}
		};
		if (opt) opt = this.util.extend(defaultOpt, opt);

		// 层级索引
		var name = [opt.mapName];
		var idx = 0;
		var pos = {
			leftPlus: 25,//115
			leftCur: 60,//150
			left: 200,//200
			top: 20//50
		};

		var line = [
			[0, 0],
			[8, 11],
			[0, 22]
		];
		// style
		var style = {
			font: '18px "Microsoft YaHei", sans-serif',
			textColor: '#eee',
			lineColor: 'rgba(147, 235, 248, .8)'
		};

		var handleEvents = {
			/**
			 * i 实例对象
			 * o option
			 * n 地图名
			 **/
			resetOption: function(i, o, n) {
				//面包屑 当前页面在导航层次结构内的位置
				var breadcrumb = this.createBreadcrumb(n);

				var j = name.indexOf(n);
				var l = o.graphic.length;
				if (j < 0) {
					o.graphic.push(breadcrumb);
					o.graphic[0].children[0].shape.x2 = 145;
					o.graphic[0].children[1].shape.x2 = 145;
					if (o.graphic.length > 2) {
						for (var x = 0; x < opt.data.length; x++) {
							if (n === opt.data[x].name + '市') {
								o.series[0].data = handleEvents.initSeriesData(opt.data);
								break;
							} else o.series[0].data = [];
						}
					};
					name.push(n);
					idx++;
				} else {
					o.graphic.splice(j + 2, l);
					if (o.graphic.length <= 2) {
						o.graphic[0].children[0].shape.x2 = 60;
						o.graphic[0].children[1].shape.x2 = 60;
						o.series[0].data = handleEvents.initSeriesData(opt.data);
					};
					name.splice(j + 1, l);
					idx = j;
					pos.leftCur -= pos.leftPlus * (l - j - 1);
				};

				o.geo.map = n;
				o.geo.zoom = 0.4;
				i.clear();
				i.setOption(o);
				this.zoomAnimation();
				opt.callback(n, o, i);
			},


			/**
			 * name 地图名
			 **/
			//Breadcrumb 面包屑，能够显示当前节点的路径
			createBreadcrumb: function(name) {
				var breadcrumb = {
					type: 'group',
					id: name,
					left: pos.leftCur + pos.leftPlus,
					top: pos.top + 3,
					children: [{
						type: 'polyline',
						left: -90,
						top: -5,
						shape: {
							points: line
						},
						style: {
							stroke: '#fff',
							key: name
							// lineWidth: 2,
						},
						onclick: function() {
							var name = this.style.key;
							handleEvents.resetOption(chart, option, name);
						}
					}, {
						type: 'text',
						left: -68,
						top: 'middle',
						style: {
							text: name,
							textAlign: 'center',
							fill: style.textColor,
							font: style.font
						},
						onclick: function() {
							var name = this.style.text;
							handleEvents.resetOption(chart, option, name);
						}
					}, {
						type: 'text',
						left: -68,
						top: 10,
						style: {
							name: name,
							text: cityMap[name] ? cityMap[name].toUpperCase() : '',
							textAlign: 'center',
							fill: style.textColor,
							font: '12px "Microsoft YaHei", sans-serif',
						},
						onclick: function() {
							// console.log(this.style);
							var name = this.style.name;
							handleEvents.resetOption(chart, option, name);
						}
					}]
				}

				pos.leftCur += pos.leftPlus;

				return breadcrumb;
			},

			// 设置effectscatter 
			initSeriesData: function(data) {
				var temp = [];
				for (var i = 0; i < data.length; i++) {
					var geoCoord = data[i].value;;
					//if(geoCoord){
					temp.push({
						name: data[i].name,
						value: geoCoord,
						//dizhi: data[i].dizhi,
					});
					//  }
					//console.log(value);
				};
				return temp;
			},
//调节大小
			zoomAnimation: function() {

				         var count = 0.4;
				         var timer = setInterval(function(){
				             count += 0.2;
				             if(count >= 1) clearInterval(timer);
				             chart.setOption({
				                 geo: {
				                     zoom: count
				                 }
				             });
				         },100);

				var count = null;
				var zoom = function(per) {
					if (!count) count = per;
					count = count + per;
					// console.log(per,count);
					chart.setOption({
						geo: {
							zoom: count
						}
					});
					if (count < 1) window.requestAnimationFrame(function() {
						zoom(0.2);
					});
				};
				zoom(0.2);
			}
		};

		var option = {
			backgroundColor: opt.bgColor,
			graphic: [{
				type: 'group',
				left: 19.8,//198
				top: pos.top - 4,
				children: [{
					type: 'line',
					left: 0,
					top: -20,
					shape: {
						x1: 0,
						y1: 0,
						x2: 60,
						y2: 0
					},
					style: {
						stroke: style.lineColor,
					}
				}, {
					type: 'line',
					left: 0,
					top: 20,
					shape: {
						x1: 0,
						y1: 0,
						x2: 60,
						y2: 0
					},
					style: {
						stroke: style.lineColor,
					}
				}]
			}, {
				id: name[idx],
				type: 'group',
				left: 20,//200
				top: pos.top,
				children: [{
					type: 'polyline',
					left: 90,
					top: -12,
					shape: {
						points: line
					},
					style: {
						stroke: 'transparent',
						key: name[0]
					},
					onclick: function() {
						var name = this.style.key;
						handleEvents.resetOption(chart, option, name);
					}
				}, {
					type: 'text',
					left: 0,
					top: 'middle',
					style: {
						text: name[0] === '河北' ? '河北省' : name[0],
						textAlign: 'center',
						fill: style.textColor,
						font: style.font
					},
					onclick: function() {
						handleEvents.resetOption(chart, option, '河北');
					}
				}, {
					type: 'text',
					left: 0,
					top: 10,
					style: {
						text: 'HEBEI',
						textAlign: 'center',
						fill: style.textColor,
						font: '12px "Microsoft YaHei", sans-serif',
					},
					onclick: function() {
						handleEvents.resetOption(chart, option, '河北');
					}
				}]
			}],
			//		



			//		
			geo: {
				map: opt.mapName,
				roam: true,
				zoom: 1.2,
				label: {
					normal: {
						show: true,
						textStyle: {
							color: '#fff'
						}
					},
					emphasis: {
						textStyle: {
							color: '#fff'
						}
					}
				},
				//地图颜色
				itemStyle: {
					normal: {
						borderColor: 'rgba(147, 235, 248, 1)',
						borderWidth: 1,
						areaColor: {
							type: 'radial',
							x: 0.5,
							y: 0.5,
							r: 0.8,
							colorStops: [{
								offset: 0,
								color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
							}, {
								offset: 1,
								color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
							}],
							globalCoord: false // 缺省为 false
						},
						shadowColor: 'rgba(128, 217, 248, 1)',
						// shadowColor: 'rgba(255, 255, 255, 1)',
						shadowOffsetX: -2,
						shadowOffsetY: 2,
						shadowBlur: 10
					},
					emphasis: {
						areaColor: '#389BB7',
						borderWidth: 0
					}
				},
				regions: opt.activeArea.map(function(item) {
					if (typeof item !== 'string') {
						return {
							name: item.name,
							itemStyle: {
								normal: {
									areaColor: item.areaColor || '#389BB7'
								}
							},
							label: {
								normal: {
									show: item.showLabel,
									textStyle: {
										color: '#fff'
									}
								}
							}
						}
					} else {
						return {
							name: item,
							itemStyle: {
								normal: {
									borderColor: '#91e6ff',
									areaColor: '#389BB7'
								}
							}
						}
					}
				})
			},
			tooltip: { //坐标点的信息浮动提示框组件
				show: true,
				trigger: 'item', //触发类型,'item'数据项图形触发
				triggerOn: 'mousemove', //提示框触发的条件,'mousemove'鼠标移动时触发。'click'鼠标点击时触发
				//formatter:"名称:{b}<br/>坐标:{c}" ,//显示名称+坐标  坐标:{c}

				formatter: function(a) {
					return (
						//   `公司: ${a['data'].name}</br>地址: ${a['data'].dizhi} `
						`公司: ${a['data'].name} `
					)
				}
			},
			series: [{
				type: 'effectScatter', //特效散点图
				coordinateSystem: 'geo', //'cartesian2d'使用二维的直角坐标系。'geo'使用地理坐标系
				// symbol: 'diamond',
				showEffectOn: 'render', //配置何时显示特效
				rippleEffect: { //涟漪特效相关配置
					period: 15,
					scale: 3, //动画中波纹的最大缩放比例
					brushType: 'fill'
				},
				hoverAnimation: true,
				itemStyle: {
					normal: {
						color: "red",
						shadowBlur: 10,
						shadowColor: '#333'      
						//label: {
						//	show: false
						//}
					},
				},
				data: handleEvents.initSeriesData(opt.data)
			}]
		};

		chart.setOption(option);
		// 添加事件
		// 	function data1() {
		// 		$('#smonth').click(function(){
		// 			var zuobiao = [];
		// 		$.ajax({
		// 			type: "get",
		// 			url: "zuobiaodizhi.json",
		// 			dataType: "json",
		// 			success: function(data) {
		// 				var list = data;
		// 				console.log(list);    //f12 控制台显示										
		// 				for(var i = 0; i < list.length; i++) {										
		// 					  if(list[i].name=="盛世康华01")
		// 					   //{continue;}   //continue: 终止当前的一次循环过程，其不跳出循环,而是继续往下判断循环条件执行语句											  
		//                              zuobiao.push(data[i].value,data[i].name,data[i].dizhi)
		// 			}
		// 		}
		// 		});
		// 	}
		// }
		chart.on('click', function(params) {
			var _self = this; //执行地图


			//坐标定位
			// var zuobiao= {
			// 	"张家口市":[
			// 	    {
			// 	        "name": "盛世康华",
			// 	        "value": [114.892538, 40.77485],
			// 			"dizhi":"张家口桥东区114号",
			// 	    },
			// 	    {
			// 	        "name": "盛世康华",
			// 	        "value": [115.304692, 40.562075],
			// 			"dizhi":"张家口下花园区113号"
			// 	    },
			// 		{
			// 	        "name": "盛世康华",
			// 	        "value": [114.392763, 40.762454],
			// 			"dizhi":"张家口万全县112号"
			// 	    }
			// 	],
			// 	 "保定市":[
			// 	    {
			// 	        "name": "盛世康华",
			// 	        "value": [115.494810169,38.886564548],
			// 			"dizhi":"保定市北市区111号"
			// 	    },
			// 	]
			// }
			if (opt.goDown && params.name !== name[idx]) {
				//下钻到市
				if (cityMap[params.name]) {
					var url = './map/' + cityMap[params.name] + '.json';
					$.get(url, function(response) {
						// console.log(response);
						curGeoJson = response;
						echarts.registerMap(params.name, response);
						//console.log(zuobiao);
						//option.series[0].data=zuobiao[params.name]        //坐标定位
						//console.log(option.series[0].data);
						handleEvents.resetOption(_self, option, params.name); //重新设置 option
					});
				}
				// //
				//          else{ // 下钻到县区级
				//              var data = {features: [],name: params.name};
				//              var temp = curGeoJson.features;
				//              for(var i = 0;i < temp.length;i++){
				//                  if(temp[i].properties.name === params.name){
				//                      data.features.push(temp[i]);
				//                      break;
				//                  }
				//              };
				//              // console.log(data);
				//              echarts.registerMap(params.name, data);
				//              handleEvents.resetOption(_self, option, params.name);
				//          }
				// //
			}
		});

		chart.setMap = function(mapName) {
			var _self = this;
			if (mapName.indexOf('市') < 0) mapName = mapName + '市';
			var citySource = cityMap[mapName];
			if (citySource) {
				var url = './map/' + citySource + '.json';
				$.get(url, function(response) {
					// console.log(response);
					curGeoJson = response;
					echarts.registerMap(mapName, response);
					handleEvents.resetOption(_self, option, mapName);
				});
			}
			// handleEvents.resetOption(this, option, mapName);
		};

		return chart;

	};
